<template>
  <div class="online">
    <van-nav-bar title="在线收款">
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        slot="left"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>

    <div class="online-top">
      <img
        src="~assets/image/icon_on_yinglian.png"
        alt=""
        width="23"
        height="14"
      />
      <span>设置金额</span>
    </div>

    <van-field v-model="money" type="number" placeholder="请输入金额">
      <span slot="label">¥</span>
    </van-field>
    <div class="xian"></div>
    <p class="describe">支付信用卡：</p>
    <div class="online-item">
      <div class="online-item-left">
        <img
          v-if="creditCard.bank_acronym != ''"
          :src="
            require('../../assets/image/bankIcon/BANK_' +
              creditCard.bank_acronym +
              '.png')
          "
          width="24"
          height="24"
        />
        <img
          v-else
          src="../../assets/image/icon_default_bank.png"
          width="24"
          height="24"
          alt=""
        />
        <span v-if="creditCard.nature == '贷记卡'">
          {{ creditCard.bankName }} {{ creditCard.cardNo | card }}
        </span>
        <span v-else @click="AddCreditCard()"> 请点击添加信用卡 </span>
      </div>
      <div class="online-item-right">
        <span>更多</span>
        <img
          src="../../assets/image/icon_on_right.png"
          width="5"
          height="10"
          alt=""
        />
      </div>
    </div>
    <div class="xian"></div>
    <p class="describe">到账储蓄卡：</p>
    <div class="online-item">
      <div class="online-item-left">
        <img
          v-if="savingsDepositCard.bank_acronym != ''"
          :src="
            require('../../assets/image/bankIcon/BANK_' +
              savingsDepositCard.bank_acronym +
              '.png')
          "
          width="24"
          height="24"
          alt=""
        />
        <img
          v-else
          src="../../assets/image/icon_default_bank.png"
          width="24"
          height="24"
          alt=""
        />

        <span v-if="creditCard.nature == '贷记卡'">
          {{ savingsDepositCard.bankName }}
          {{ savingsDepositCard.cardNo | card }}
        </span>
        <span v-else @click="AddStorageCard()">请点击添加储蓄卡</span>
      </div>
      <div class="online-item-right">
        <span>更多</span>
        <img
          src="../../assets/image/icon_on_right.png"
          width="10"
          height="10"
          alt=""
        />
      </div>
    </div>
    <div class="xian"></div>
    <p class="next" @click="next">立即支付</p>
    <van-popup
      v-model="show"
      position="bottom"
      round
      closeable
      :style="{ height: '60%' }"
    >
      <p class="title">选择收款通道</p>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          v-for="(item, index) in newSupportChannel"
          :key="index"
          @click="newItem(item)"
        >
          <div class="van-popup-title">
            <img :src="item.log" width="37" height="27" alt="" />
            <div class="van-popup-title-div">
              <p class="van-popup-title-top">
                <span>{{ item.name }}</span>
                {{ item.remarks }}
              </p>
              <p>{{ item.channelParams | getSettleAmountWay }}</p>
            </div>
          </div>
          <div class="popup-item-div">
            <div class="popup-item">
              <p>
                单笔限额：¥{{ item.singleMinLimit }}-¥{{ item.singleMaxLimit }}
              </p>
              <p>单日限额：¥{{ item.everyDayMaxLimit }}</p>
            </div>
            <div class="popup-item">
              <p>
                交易时间：{{ item.startTime | getTime }}-{{
                  item.endTime | getTime
                }}
              </p>
              <p>
                交易费率：{{ item.rate | getRate }}+{{
                  item.extraFee | getMoney
                }}
              </p>
            </div>
            <div class="popup-item">
              <p>
                手 续 费&nbsp;&nbsp;：&nbsp;¥{{
                  (item.rate * money + 1) | getMoney
                }}
              </p>
              <p>
                实际到账：¥{{ (money - (item.rate * money + 1)) | getMoney }}
              </p>
            </div>
          </div>
          <p class="popup-text">（数据仅供参考，实际金额以具体到账为准）</p>
        </div>
      </van-list>
    </van-popup>
  </div>
</template>
<script>
import {
  queryNewUserBankCardsApi,
  executeNewSetDefaultBankCardApi,
  queryCardPicApi,
  queryNewSupportChannelApi,
  queryExecuteNewPayApi,
} from "network/ApiServe";
export default {
  name: "OnlineCollection",
  filters: {
    card(v) {
      return "(" + String(v).substring(String(v).length - 4) + ")";
    },
    getSettleAmountWay(value) {
      let txt = "";
      switch (value) {
        case "D0":
          txt = "2小时内到账(不限日期，快速到账)";
          break;
        case "D1":
          txt = "明日到账(不限日期，快速到账)";
          break;
        case "T0":
          txt = "工作日2小时内到账(休息日和节假日不结算)";
          break;
        case "T1":
          txt = "下个工作日到账(休息日和节假日不结算)";
          break;
      }
      return txt;
    },
    getTime(value) {
      return String(value).substring(0, value.length - 3);
    },
    getRate(value) {
      return parseFloat(value * 100).toFixed(2) + "%";
    },
    getMoney(value) {
      return parseFloat(value).toFixed(2);
    },
  },
  created() {
    this.userId = localStorage.getItem("userId");
    this.brandId = localStorage.getItem("brandId");
    this.phone = localStorage.getItem("phone");
  },
  data() {
    return {
      show: false,
      money: "",
      newBankCardCategory: [
        { type: 0, text: "充值卡" },
        { type: 2, text: "到账卡" },
        { type: 3, text: "支付宝" },
      ],
      bankCardType: [
        { type: 0, text: "贷记卡" },
        { type: 2, text: "借记卡" },
      ],
      newBankCardCount: [
        { type: 0, text: "所有" },
        { type: 1, text: "默认" },
      ],
      Enum_NewChannelCount: [
        { type: 1, text: "默认" },
        { type: 2, text: "所有" },
      ],
      //信用卡
      creditCard: {},
      //储蓄卡
      savingsDepositCard: {},

      loading: false,
      finished: false,
      newSupportChannel: [],
    };
  },
  mounted() {
    //查询 储蓄卡
    this.getSavingsDepositCard();
    //查询 信用卡
    this.getcreditCard();

    // this.getInfo();
  },
  methods: {
    addH5Params(index) {
      let str1 =
        index +
        "?phone=" +
        this.phone +
        "&token=" +
        this.token +
        "&brand_id=" +
        this.brandId +
        "&user_id=" +
        this.userId +
        "&ip=" +
        "application.mingchetech.com" +
        // "app20slb.mingchetech.com" +
        "&type=app";

      return str1;
    },
    newItem(item) {
      console.log(item);
      this.getExecuteNewPay(
        this.money,
        item.channelTag,
        item.name,
        item.channelParams,
        this.creditCard.cardNo,
        this.creditCard.bankName
      );
    },
    getExecuteNewPay(
      money,
      channeTag,
      channelInfoName,
      channelParams,
      bankCard,
      creditBankName
    ) {
      queryExecuteNewPayApi(
        this.brandId,
        this.userId,
        this.phone,
        money,
        channeTag,
        channelInfoName,
        channelParams,
        bankCard,
        creditBankName
      )
        .then((res) => {
          console.log("queryExecuteNewPayApi", res);
          if (res.resp_code === "000000") {
            // window.open(res.result);
            this.$router.push({
              name: "OpenWeb",
              params: {
                title: "在线收款",
                url: this.addH5Params(res.result),
              },
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //next
    next() {
      if (this.money == "") {
        this.$toast("请输入余额");
        return;
      }
      if (parseFloat(this.money).toFixed(2) < 10.0) {
        this.$toast("余额不能小于10元");
        return;
      }
      this.show = true;
    },
    onLoad() {
      this.getNewSupportChannel(this.creditCard.cardNo, this.money);
      setTimeout(() => {
        this.loading = false;
        this.finished = true;
      }, 1000);
    },
    //添加信用卡
    AddCreditCard() {
      this.$router.push("/addcreditcard");
    },
    // 添加储存卡
    AddStorageCard() {
      this.$router.push("/addstoragecard");
    },
    //通道
    getNewSupportChannel(bankCard, money) {
      this.newSupportChannel = [];
      queryNewSupportChannelApi(
        this.userId,
        this.brandId,
        bankCard,
        money,
        this.Enum_NewChannelCount[1].type
      )
        .then((res) => {
          console.log("queryNewSupportChannelApi", res);
          if (res.resp_code === "000000") {
            res.result.filter((item) => {
              console.log("channelTag", item.channelTag);
              if (
                // item.channelTag != "JFT_2010_QUICK" ||
                item.channelTag === "JFT_2010_QUICK"
              ) {
              } else {
                this.newSupportChannel.push(item);
              }
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //返回
    leftClick() {
      this.$router.back(-1);
    },
    // 查询 储蓄卡
    getSavingsDepositCard() {
      let _this = this;
      this.savingsDepositCard = {};
      queryNewUserBankCardsApi(
        this.userId,
        this.newBankCardCategory[1].type,
        this.bankCardType[1].type,
        this.newBankCardCount[1].type
      )
        .then((res) => {
          if (res.resp_code === "000000") {
            if (res.result != null) {
              res.result.map((item) => {
                queryCardPicApi()
                  .then((res1) => {
                    if (res1.resp_code == "000000") {
                      res1.result.map((items) => {
                        if (item.bankName == items.bank_name) {
                          item.background = items.background;
                          item.bank_acronym = items.bank_acronym;
                        }
                      });
                      _this.savingsDepositCard = item;
                    }
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              });
            }
          } else if (res.resp_code === "666666") {
            this.$dialog
              .confirm({
                title: "添加銀行卡",
                message: "您还没有储蓄卡,请先添加储蓄卡",
              })
              .then(() => {
                this.AddStorageCard();
              })
              .catch(() => {});
            return;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 信用卡
    getcreditCard() {
      let _this = this;
      this.creditCard = {};
      queryNewUserBankCardsApi(
        this.userId,
        this.newBankCardCategory[0].type,
        this.bankCardType[0].type,
        this.newBankCardCount[1].type
      )
        .then((res) => {
          if (res.resp_code === "000000") {
            // this.creditCard = res.result;
            if (res.result != null) {
              res.result.map((item) => {
                queryCardPicApi()
                  .then((res1) => {
                    if (res1.resp_code === "000000") {
                      res1.result.map((items) => {
                        if (item.bankName == items.bank_name) {
                          item.background = items.background;
                          item.bank_acronym = items.bank_acronym;
                        }
                      });
                      _this.creditCard = item;
                      console.log("itemsssss", item);
                      console.log("_this.creditCard", _this.creditCard);
                    }
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              });
            }
          } else if (res.resp_code === "666666") {
            this.$dialog
              .confirm({
                title: "添加銀行卡",
                message: "您还没有信用卡,请先添加信用卡",
              })
              .then(() => {
                this.AddCreditCard();
              })
              .catch(() => {});
          }
          console.log("creditCard", this.creditCard);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style >
.van-field__label {
  width: 20px;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  box-sizing: border-box;
  color: #646566;
  text-align: left;
  word-wrap: break-word;
}
</style>
<style scoped>
.online-top {
  margin-top: 26px;
  margin-left: 40px;
  display: flex;
  align-content: center;
}
.online-top span {
  margin-left: 3px;
  font-size: 14px;
  font-weight: 500;
  color: #444;
}
.van-field {
  width: 84%;
  margin: 16px auto 41px;
  height: 60px;
  font-size: 26px;
  display: flex;
  align-items: center;
}
.xian {
  width: 84%;
  margin: 16px auto;
  border-bottom: 1px solid #ccc;
}
.describe {
  margin-top: 18px;
  margin-left: 34px;
  font-size: 11px;
  color: #8d8d8d;
}
.online-item {
  margin: 15px 34px 26px;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  align-items: center;
}
.online-item-left {
  display: flex;
  align-items: center;
}
.online-item-left span {
  margin-left: 10px;
  color: #444;
}
.online-item-right {
  display: flex;
  align-items: center;
  color: #eac376;
}
.online-item-right img {
  margin-left: 5px;
}
.next {
  width: 86%;
  margin: 73px auto 0px;
  padding-top: 13px;
  padding-bottom: 13px;
  text-align: center;
  color: #f1ce8a;
  background-color: #121212;
  font-size: 16px;
  border-radius: 4px;
}
.van-popup {
  padding-left: 17px;
  padding-right: 17px;
  padding-bottom: 13px;
}
p.title {
  color: #444;
  font-size: 16px;
  text-align: center;
  font-weight: 500;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
}
.van-popup-title {
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.van-popup-title-div {
  font-size: 11px;
  margin-left: 12px;
  color: #8d8d8d;
}
.van-popup-title-div p {
  margin-top: 3px;
  margin-bottom: 3px;
}
.van-popup-title-top {
  font-size: 12px;
  color: #eac376;
  vertical-align: middle;
}

.van-popup-title-top span {
  font-size: 16px;
  color: #121212;
  margin-right: 5px;
}
.popup-item-div {
  margin-top: 12px;
  margin-bottom: 15px;
  padding-top: 10px;
  width: 100%;
  height: 88px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.popup-item {
  display: flex;
  padding-left: 13px;
}
.popup-item p {
  flex: 1;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 12px;
}
.popup-text {
  font-size: 11px;
  text-align: center;
  color: #bebebe;
  padding-bottom: 14px;
  border-bottom: 1px solid #eeeeee;
}
</style>
